<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑马管理系统</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-header{
            background-color: #545c64;
        }
        .header-img{
            width: 100px;
            margin-top:20px;
        }
    </style>
</head>
<body>
<div id="div">
    <el-container>
        <!-- 头部-->
        <el-header class="el-header">
            <el-container>
                <div>
                    <el-image src="img/export.png" class="header-img"></el-image>
                </div>
                <el-menu
                    mode="horizontal"
                    background-color="#545c64"
                    text-color="white"
                    active-text-color="#ffd04b"
                    style="margin-left: auto;">
                    <el-menu-item index="1">处理中心</el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">我的工作台</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="3"><a href="index.html" target="_self">首页</a></el-menu-item>
                </el-menu>
            </el-container>
        </el-header>

        <!-- 中间部分 -->
        <el-container style=" border: 1px solid #eee">
            <!-- 侧边栏 -->
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
              <el-menu :default-openeds="['1-1']"  >
                <el-submenu index="1">
                  <template slot="title"><i class="el-icon-menu"></i>教研部</template>
                  <el-menu-item-group>
                      <el-menu-item index="1-1" @click="findAll"><i class="el-icon-help"></i>员工信息</el-menu-item>
                    <el-menu-item index="1-2"><i class="el-icon-help"></i>课表信息</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>学工部</template>
                    <el-menu-item-group>
                      <el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item>
                      <el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item>
                      <el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
              </el-menu>
            </el-aside>
            
            <el-container>
              <!-- 主区域部分 -->
              <el-main>
                  <iframe :src="iframeSrc" frameborder="false" style="top:80px;left: 120px; width: 100%;height:600px"></iframe>
              </el-main>
            </el-container>
          </el-container>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el:"#div",
        data: {
            iframeSrc: "userList.html"
        },
        methods:{
            findAll:function () {
                this.iframeSrc = "userList.html"
            }
        }
    });
</script>
</html>